<template lang='pug'>
.details
  .top-option(:style="{ background: `rgba(255,255,255,${bgNum})` }")
    p.iconfont.icon-fanhui(
      :class="{ active: pactive }",
      @click="$router.go(-1)"
    )
    ul(v-if="topIsShow", :style="{ background: `rgba(255,255,255,${bgNum})` }")
      li(:class="zindex == 0 ? 'ali' : ''" @click="scrollFn") 商品
      li(:class="zindex == 1 ? 'ali' : ''" @click="scrollFn2") 评论
      li(:class="zindex == 2 ? 'ali' : ''" @click="scrollFn3") 详情
      li(:class="zindex == 3 ? 'ali' : ''" @click="scrollFn4") 推荐
    p.iconfont.icon-zhuanfa(:class="{ active: pactive }")
  #one.bnrBox
    Bnner(:bnnerList="listimg", height="3.96rem")
  .content-details(v-if="deData.length")
    h2(v-if="deData.length > 0") ￥{{ deData[0].price }}
    .title-content
      .left
        p 预计的1000米金
        p 赠完即止：满1件增价值399元MIX F..
      .right
        span 更多>
    h3(v-if="deData.length > 0") {{ deData[0].name }}
    p 「陶瓷特别版开售中！！588米金兑换1000元优惠券，288米金兑换500元优惠券；买赠价值399元芳纶纤维保护壳」
    ul(v-if="deData.length")
      li 【外观惊艳】符合持握的黄金折叠比例，操作舒适方便
      li 【系统稳定】全新定制化的MIUI操作系统，运行高速流畅
      li 【经久耐用】精密的铰链设计，超高的折叠寿命
    button 米金总换优惠卷>
  .navLeix
    Silber
  .type-box
    user-list
  .mifen
    MiFeng
  .bnnerlistfor
    Details
  .intoBottom
    h3 商品介绍
    ul
      li(v-for="d in listimg")
        img(:src="d.cover")
  .lover
    CanLove
  .topafter
  transition
    van-goods-action(v-if="$store.state.xqisShow", style="zindex: 9")
      van-goods-action-icon(icon="chat-o", text="客服", dot)
      van-goods-action-icon(icon="cart-o", text="购物车", :badge="num" @click="$router.push('/shopping')")
      van-goods-action-icon(icon="shop-o", text="店铺")
      van-goods-action-button(type="warning", text="加入购物车" @click="bnt") 
      van-goods-action-button(type="danger", text="立即购买" )
</template>
 
<script>
import Vue from "vue";

import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import Bnner from "../components/Bnner.vue";
import Silber from "../components/Silber.vue";
import UserList from "../components/UserList.vue";
import MiFeng from "../components/MiFeng.vue";
import Details from "../components/DetailsBnner.vue";
import CanLove from '../components/CanLove.vue'
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  name: "vueName",
  data() {
    return {
      deData: [],
      listimg: [
        {
          cover:
            "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/09adda25ee11a2b6dd29164fa3a8fd6c.jpg?thumb=1&w=344&h=280",
        },
        {
          cover:
            "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dff54ca1a31d2441e38c973fbc9bf9b.jpg?thumb=1&w=344&h=280",
        },
        {
          cover:
            "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dca45286d9d76d1f864a8ecf77f5600.jpg?thumb=1&w=344&h=280",
        },
      ],
      topIsShow: false,
      bgNum: 0,
      pactive: false,
      zindex: 0,
      offsetList: [],
      num: 0
    };
  },
  components: {
    Bnner,
    Silber,
    UserList,
    MiFeng,
    Details,
    CanLove
  },
  methods: {
    getScroll() {
      this.bgNum = document.documentElement.scrollTop / 600;
      if (document.documentElement.scrollTop > 200) {
        this.topIsShow = true;
        this.pactive = true;
      } else {
        this.topIsShow = false;
        this.pactive = false;
      }
      this.offsetList.forEach((item, i) => {
        var sr = document.documentElement.scrollTop || document.body.scrollTop;
        if (sr > this.offsetList[i] && sr < this.offsetList[i+1]) {
          this.zindex = i;
        }
        if (sr >= this.offsetList[this.offsetList.length - 1]) {
          this.zindex = this.offsetList.length - 1;
        }
      });
    },
    scrollFn(){
      document.documentElement.scrollTop = this.offsetList[0]
    },
     scrollFn2(){
      document.documentElement.scrollTop = this.offsetList[1]+100
    },
     scrollFn3(){
      document.documentElement.scrollTop = this.offsetList[2]+100
    },
     scrollFn4(){
      document.documentElement.scrollTop = this.offsetList[3]
    },
    fliterTo(arr,id){
      for(let i=0;i<arr.length;i++){
        if(arr[i].id == id ){
          return i;
        }
      }
      return -1
    },
    bnt(){
      let obj = Object.assign(this.deData[0],{flg:false,num:1,arr:[' 意外保护 143元起',' 延长保修服务 79元',' 云空间服务 1元起'],bao:'//s1.mi.com/m/images/m/insurance.png'})
      let arr = JSON.parse(localStorage.getItem('Lover')) || []
      console.log(arr)
      let indexto = this.fliterTo(arr,this.deData[0].id)
      if(indexto==-1){
        arr.push(obj)
      }else{
        arr[indexto].num ++
      }
      localStorage.setItem('Lover',JSON.stringify(arr))
      this.$store.commit('setdetails',arr)
    }
  },
  created() {
    this.num = JSON.parse(localStorage.getItem('Lover') || '[]').length
    console.log(this.$route.query.id);
    this.$store.commit("setIsShow", false);
    document.documentElement.scrollTop = 0;
    this.$http
      .get("http://192.168.43.168:8082/user/search?id=" + this.$route.query.id)
      .then(({ data }) => {
        this.deData = data;
        let obf = {
          cover: data[0].cover,
        };
        this.listimg.unshift(obf);
        console.log(this.listimg);
      });
  },
  mounted() {
    this.$nextTick(() => {
      this.$store.commit("setxqIsShow", true);
    });
    window.addEventListener("scroll", this.getScroll);
    this.$nextTick(function () {
      let one = document.querySelector(".bnrBox");
      let two = document.querySelector(".type-box");
      let therr = document.querySelector(".intoBottom");
      let lover = document.querySelector('.lover')
      this.offsetList = [one.offsetTop, two.offsetTop+200,therr.offsetTop+300,lover.offsetTop+650];
      console.log(this.offsetList);
    });
  },
  beforeDestroy() {
    // this.$store.commit("setIsShow", true);
    if(this.$route.path == '/home/liser'){
      this.$store.commit("setIsShow", true);
    }
    this.$store.commit("setxqIsShow", false);
    window.removeEventListener("scroll", this.getScroll);
  },
  watch:{
    '$store.state.details':{
      deep: true,
      handler(){
        this.num = JSON.parse(localStorage.getItem('Lover') || '[]').length
      }
    }
  }
};
</script>
 
<style scoped lang="sass">
.details
  width: 100%
  background: #eee
  .van-goods-action
    zindex: 8
  .top-option
    width: 100%
    height: .46rem
    background: rgba(255,255,255,0)
    display: flex
    justify-content: space-between
    align-items: center
    position: fixed
    z-index: 2
    ul
      display: flex
      width: 60%
      height: 100%
      justify-content: space-around
      align-items: center
      background: #fff
    .ali
      color: #ff5934
      position: relative
      &::before
        content: ''
        position: absolute
        bottom: -.04rem
        width: .15rem
        height: .03rem
        background: #ff5934
        left: 50%
        transform: translateX(-50%)
        border-radius: .1rem
    p
      margin: .15rem
      width: .3rem
      height: .3rem
      background: rgba(0,0,0,0.3)
      text-align: center
      color: #fff
      line-height: .3rem
      border-radius: 50%
      font-weight: 200
    .active
      color: #000
      background: none
  .bnrBox
    width: 100%
    height: 389px
  .content-details
    width: 100%
    padding: .2rem
    border-bottom: 1px solid #ccc
    background: #fff
    h2
      font-size: .25rem
      font-weight: bold
      color: #ff6700
    .title-content
      width: 100%
      height: .48rem
      padding: .1rem
      background: #fff2ef
      display: flex
      justify-content: space-between
      align-items: center
      p
        font-size: .12rem
        color: #ff6700
        border: .5px solid #ff6700
        margin-top: .02rem
        border-radius: .02rem
      p:nth-child(1)
        width: 50%
      span
        font-size: .12rem
        color: #ff6700
    h3
      font-size: .2rem
      font-weight: bold
      line-height: .5rem
    p
      font-size: .12rem
    ul
      width: 100%
      li
        list-style-type: disc
        font-size: .12rem
        margin-top: .1rem
        margin-left: .15rem
    button
      font-size: .12rem
      padding: 0 .1rem
      border-radius: .1rem
      margin-top: .1rem
  .topafter
    height: .5rem
  .type-box
    position: relative
    z-index: 0
    margin-bottom: .1rem
  .navLeix
    margin-bottom: .1rem
  .intoBottom
    margin-top: .2rem
    background: #fff
  .bnnerlistfor
    width: 100%
    margin-top: .1rem
    background: #fff
    
  .intoBottom
    width: 100%
    margin-top: .1rem
    background: #fff
    padding: .1rem
    h3
      width: 100%
      height: .3rem
      font-size: .14rem
    ul
      width: 100%
      li
        height: 4rem
        width: 100%
  .lover
    width: 100%
    background: #fff
    padding: .2rem
    margin-top: .1rem
  .v-enter
    transfrom: translateY(100%)
  .v-enter-active
    transition: .5s
</style>